<!-- eslint-disable vue/multi-word-component-names -->
<!--
 * @Author: 王博文 && 1392750385@qq.com
 * @Date: 2024-08-15 19:30:29
 * @LastEditors: 王博文
 * @LastEditTime: 2024-08-18 21:12:01
 * @Description: 日拱一卒无有尽,功不唐娟终入海
 * @FilePath: \web-wbw\wbw\src\views\Home\Home.vue
-->
<template>
  <div class="box">

    <!-- 头部导航栏 -->
    <div class="Navigation">
      <van-nav-bar title="标题" left-arrow @click-left="onClickLeft">
        <template #right>
          <router-link to="./message"><van-icon name="like" badge="9" color="#ee0a24" size="30" /></router-link>
        </template>
      </van-nav-bar>
      <!-- <router-link to=""><button style="">跳</button></router-link> -->
    </div>

    <!-- Tab切换 -->
    <div class="bodys">
      <van-tabs v-model:active="active">
        <van-tab title="常见病症">
          <!-- 左侧导航栏的数据要求 -->
          <div class="lefts">
            <van-sidebar v-model="actives" @change="handleSidebarChange">
              <!-- 根据定义数据来渲染左侧导航栏 -->
              <van-sidebar-item v-for="(item, index) in texts" :key="index" :title="item" />
            </van-sidebar>
          </div>

          <div class="datas">
            <!-- 在这里显示与当前激活侧边栏项相关的数据 -->
            <div v-html="selectedContent.description"></div>
          </div>

        </van-tab>
        <van-tab title="常用药品">
          <!-- 左侧导航栏的数据要求 -->
          <div class="lefts">
            <van-sidebar v-model="activesr" @change="handleSidebarChanges">
              <!-- 根据定义数据来渲染左侧导航栏 -->
              <van-sidebar-item v-for="(item, index) in textsr" :key="index" :title="item" />
            </van-sidebar>
          </div>

          <div class="datas">
            <!-- 在这里显示与当前激活侧边栏项相关的数据 -->
            <div v-html="selectedContents.descriptions"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>



  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const active = ref(0);
const actives = ref(0);
const activesr = ref(3);


// 第一个左侧导航栏数据
const texts = [
  '内科',
  '眼科',
  '骨科',
  '小儿科',
  '急诊科',
  '性病科',
  '皮肤性病',
  '耳鼻喉科',
  '神经病科',
];
// 第二个左侧导航栏数据
const textsr = [
  '感冒用药',
  '风湿骨伤',
  '两性健康',
  '儿童用药',
  '三高用药',
  '其他药品',
];

// 与导航栏项相关联的内容数据
const contents = ref([
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽1</span><span>腹泻1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症1</span><span>消化性溃疡1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽1</span><span>腹泻1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎1</span><span>结核病1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘1</span><span>锌缺乏1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热1</span><span>新生儿肺炎1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症1</span><span>缺氧性脑病1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎1</span><span>发热扁桃体炎1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">感冒1</span><span>腹泻1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热1</span><span>新生儿肺炎1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症1</span><span>缺氧性脑病1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症1</span><span>消化性溃疡1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病1</span><span>梅毒1</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎1</span><span>发热扁桃体炎1</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽2</span><span>腹泻2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症2</span><span>消化性溃疡2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽2</span><span>腹泻2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎2</span><span>结核病2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘2</span><span>锌缺乏2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热2</span><span>新生儿肺炎2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症2</span><span>缺氧缺血性脑病2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎2</span><span>发热扁桃体炎2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)2</span><span>腹泻2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热2</span><span>新生儿肺炎2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症2</span><span>缺氧缺血性脑病2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症2</span><span>消化性溃疡2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病2</span><span>梅毒2</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎2</span><span>发热扁桃体炎2</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽3</span><span>腹泻3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症</span><span>消化性溃疡<3/span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽3</span><span>腹泻3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎3</span><span>结核病3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘3</span><span>锌缺乏3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热3</span><span>新生儿肺炎3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症3</span><span>缺氧缺血性脑病3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎3</span><span>发热扁桃体炎3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)3</span><span>腹泻3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热3</span><span>新生儿肺炎3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症3</span><span>缺氧缺血性脑病3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症3</span><span>消化性溃疡3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病3</span><span>梅毒3</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎3</span><span>发热扁桃体炎3</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽4</span><span>腹泻4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症4</span><span>消化性溃疡4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽4</span><span>腹泻4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎4</span><span>结核病4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘4</span><span>锌缺乏4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热4</span><span>新生儿肺炎4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症4</span><span>缺氧缺血性脑病4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎4</span><span>发热扁桃体炎4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)4</span><span>腹泻4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热4</span><span>新生儿肺炎4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症4</span><span>缺氧缺血性脑病4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症4</span><span>消化性溃疡4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病4</span><span>梅毒4</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎4</span><span>发热扁桃体炎4</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽5</span><span>腹泻5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症5</span><span>消化性溃疡5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽5</span><span>腹泻5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎5</span><span>结核病5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘5</span><span>锌缺乏5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热5</span><span>新生儿肺炎5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症5</span><span>缺氧缺血性脑病5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎5</span><span>发热扁桃体炎5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)5</span><span>腹泻5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热5</span><span>新生儿肺炎5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症5</span><span>缺氧缺血性脑病5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症5</span><span>消化性溃疡5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病5</span><span>梅毒5</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎5</span><span>发热扁桃体炎5</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽6</span><span>腹泻6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症6</span><span>消化性溃疡6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽6</span><span>腹泻6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎6</span><span>结核病6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘6</span><span>锌缺乏6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热6</span><span>新生儿肺炎6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症6</span><span>缺氧缺血性脑病6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎6</span><span>发热扁桃体炎6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)6</span><span>腹泻6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热6</span><span>新生儿肺炎6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症6</span><span>缺氧缺血性脑病6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症6</span><span>消化性溃疡6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病6</span><span>梅毒6</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎6</span><span>发热扁桃体炎6</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽7</span><span>腹泻7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症7</span><span>消化性溃疡7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽7</span><span>腹泻7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎7</span><span>结核病7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘7</span><span>锌缺乏7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热7</span><span>新生儿肺炎7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症7</span><span>缺氧缺血性脑病7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎7</span><span>发热扁桃体炎7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)7</span><span>腹泻7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热7</span><span>新生儿肺炎7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症7</span><span>缺氧缺血性脑病7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症7</span><span>消化性溃疡7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病7</span><span>梅毒7</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎7</span><span>发热扁桃体炎7</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽8</span><span>腹泻8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症8</span><span>消化性溃疡8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽8</span><span>腹泻8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎8</span><span>结核病8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘8</span><span>锌缺乏8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热8</span><span>新生儿肺炎8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症8</span><span>缺氧缺血性脑病8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎8</span><span>发热扁桃体炎8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)8</span><span>腹泻8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热8</span><span>新生儿肺炎8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症8</span><span>缺氧缺血性脑病8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症8</span><span>消化性溃疡8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病8</span><span>梅毒8</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎8</span><span>发热扁桃体炎8</span></p>
      </div>
      `
  },
  {
    description: `
      <div style="width: 100%;height: 550px;>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽9</span><span>腹泻9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症9</span><span>消化性溃疡9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">肺炎咳嗽9</span><span>腹泻9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">慢性肝炎9</span><span>结核病9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">长期便秘9</span><span>锌缺乏9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热9</span><span>新生儿肺炎9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症9</span><span>缺氧缺血性脑病9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎9</span><span>发热扁桃体炎9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">(感冒(急性上呼吸道感染)9</span><span>腹泻9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">反复外感发热9</span><span>新生儿肺炎9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">新生儿败血症9</span><span>缺氧缺血性脑病9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">小儿厌食症9</span><span>消化性溃疡9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">艾滋病9</span><span>梅毒9</span></p>
        <p style="line-height: 28px;margin-bottom: 10px;"><span style="margin-left: 30px;margin-right: 30px;">化脓性脑膜炎9</span><span>发热扁桃体炎9</span></p>
      </div>
      `
  },

  // ... 添加其他科室的内容
]);

// 与导航栏项相关联的内容数据
const contentse = ref([
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  {
    descriptions: `
      <div style="width: 100%;height: 550px;">
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>感冒颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清热解毒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>头孢</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>那敏颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>扁桃体</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>飞鹤颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>二丁颗粒</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>清肺止咳</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>儿片陶笛</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-left: 15px;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>化痰解读</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-right: 12px;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>口服液</dd>
        </dl>
        <dl style="width: 25%;height: 100px;border: solid 1px #000;margin-bottom: 20px;float: left;">
          <dt><img src="../../assets/image/t1.jpg" style="width: 100%;height: 75px;" alt=""></dt>
          <dd>护肝片</dd>
        </dl>
      </div>
      `
  },
  // ... 添加其他科室的内容
]);

// 当前选择的内容
const selectedContent = ref(contents.value[0]);

// 处理侧边栏项变化的方法
const handleSidebarChange = (index: number) => {
  selectedContent.value = contents.value[index];
};

// 当前选择的内容
const selectedContents = ref(contentse.value[0]);

// 处理侧边栏项变化的方法
const handleSidebarChanges = (index: number) => {
  selectedContents.value = contentse.value[index];
};

const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.lefts {
  float: left;
  width: 80px;
  height: 575px;
  overflow: auto;
}

.datas {
  float: left;
  width: 295px;
  height: 575px;
  overflow: scroll;
  // background: red;
}
</style>